<template>
	<view>
		<u-form :model="form" ref="uForm" label-width="180" class="form-content">
			<u-form-item label="运营商类型">
				<u-radio-group v-model="form.type">
					<u-radio :name="1">小区运营商</u-radio>
					<u-radio :name="2">县区运营商</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<view class="type-text" v-if="form.type == 1">
				<u-parse class="type-text" :html="type1Text"></u-parse>
				<!-- <view>成为我们的小区独家运营商，辖区内所有用户成功下单，您均可得到相应的佣金分成（详见每个产品的标注），足不出小区、您的月收入一般在1万+。</view>
				<view>成为小区运营商您需要交纳500元保证金（先交200，其余从佣金中扣缴），申请成功后7天内辖区成功辖区数量未达到3单或者月合作考核标准（辖区内成功下单100张/月）未达标，您将被终止运营商资格，已缴纳的保证金不退。</view> -->
			</view>
			
			<view class="type-text" v-if="form.type == 2">
				<u-parse class="type-text" :html="type2Text"></u-parse>
				<!-- <view>成为我们的县区独家运营商，辖区内所有用户成功下单，您均可得到相应的佣金分成（详见每个产品的标注），月收入一般在5万+。</view>
				<view>成为县区运营商您需要交纳5000元保证金（先交800，其余从佣金中扣缴）。</view>
				<view>申请成功7天内辖区成功下单数量未达到10单或者90天内辖区成功下单数量未达到1000张或者180天内成功下单数量未达到5000张，您将被终止运营商资格，已缴纳的保证金不退。</view> -->
			</view>
			
			<u-form-item label="姓名" prop="username">
				<u-input v-model="form.username" />
			</u-form-item>
			<u-form-item label="身份证号" prop="id_number">
				<u-input v-model="form.id_number" />
			</u-form-item>
			<u-form-item label="联系电话" prop="mobile">
				<u-input v-model="form.mobile" />
			</u-form-item>
			<u-form-item label="申请区域" prop="region">
				<view class="form-item-cell" @click="towshow=true">
					<view class="name one-txt-cut">{{ form.region }}</view>
					<u-icon name="arrow-right" color="#bbb" size="28"></u-icon>
				</view>
				<!-- <u-input v-model="form.region" type="select" @click="towshow = true" /> -->
			</u-form-item>
			<u-form-item label="详细地址" prop="address" v-if="form.type == 1">
				<u-input v-model="form.address" placeholder="请填写完整的小区/村/写字楼等名称" />
			</u-form-item>
			
			<!-- <u-form-item label="登录密码" prop="password">
				<u-input v-model="form.password" type="password" />
			</u-form-item> -->
			
			<view class="sub-content">
				<u-button type="primary" @click="handelSubmit">提交</u-button>
			</view>
		</u-form>
		
		<u-picker mode="region" v-model="towshow" confirm-color='#26C281' :area-code='areaCode' @confirm='confirmBtn'></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				towshow:false,
				areaCode:[],
				rules: {
					username: [{required: true, message: '请输入姓名', trigger: ['blur', 'change']}],
					id_number: [{required: true, message: '请输入身份证号', trigger: ['blur', 'change']}],
					mobile: [{required: true, message: '请输入联系电话', trigger: ['blur', 'change']}],
					region: [{required: true, message: '请选择区域', trigger: ['blur', 'change']}],
					address: [{required: true, message: '请填写完整的小区/村/写字楼等名称', trigger: ['blur', 'change']}],
					password: [{required: true, message: '请输入登录密码', trigger: ['blur', 'change']}],
					
				},
				form: {
					type: 1
				},
				type1Text: '',
				type2Text: ''
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.indexConfig()
		},
		methods: {
			indexConfig() {
				this.$httpApi.indexConfig().then((res) => {
					this.type1Text = res.data.xiaoqu_memo
					this.type2Text = res.data.quxian_memo
				})
			},
			// 选择地址
			confirmBtn(val){
				this.form.region = val.province.label+''+val.city.label+''+val.area.label
				this.form.province = val.province.label;
				this.form.city = val.city.label;
				this.form.area = val.area.label;
			},
			handelSubmit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// console.log('验证通过');
						uni.showModal({
							title: '提示',
							content: '同意合作约定并申请',
							cancelText: '以后再说',
							confirmText: '确认提交',
							success: (res) => {
								if (res.confirm) {
									this.onSubmit()
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					} else {
						// console.log('验证失败');
					}
				});
			},
			jump(){
				uni.switchTab({
					url: '/pages/shop/shop'
				})
			},
			onSubmit() {
				// console.log(this.form)
				this.$httpApi.applyFor(this.form).then((res) => {
					if(res.code == 3) {
						// uni.showToast({
						// 	title: '申请成功'
						// })
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: (res) => {
								if (res.confirm) {
									this.jump()
								} else if (res.cancel) {
									this.jump()
								}
							}
							// cancelText: '确认',
							// confirmText: '确认提交',
						})
						
					}else if(res.code == 4) {
						
						uni.showModal({
							title: '提示',
							content: res.msg,
							// cancelText: '确认',
							// confirmText: '确认提交',
							success: (res) => {
								if (res.confirm) {
									// this.onSubmit()
								} else if (res.cancel) {
									// console.log('用户点击取消');
								}
							}
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.form-content {
		padding: 30rpx;
		background-color: #fff;
	}
	.type-text {
		line-height: 50rpx;
		color: #666;
		
		view {
			text-indent: 40rpx;
		}
	}
	
	.sub-content {
		margin-top: 80rpx;
	}
	.form-item-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.name {
			flex: 1;
			width: 100rpx;
			margin-right: 10rpx;
		}
	}
</style>